<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" href='<c:url value="/share/bootstrap.min.css"></c:url>'> 
		 <script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
		<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
		<script src='<c:url value="/js/all.js"></c:url>'></script> 
		<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
		<script type="text/javascript"
		src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>
		<style type="text/css">
			.header_nav_1_current{
				float: left;
				margin-right: 50px;
				margin-top: 35px;
			}
			.header_nav_2{
				float: right;
				margin-top: 35px;
			}
			.header_nav_1_current span{
				background: #2b5eae;
				color: #fff;
				padding:2px 6px;
				border-radius: 50%;
			}
			.header_nav_1_current font{
				font-family: "微软雅黑";
				font-size: 18px;
				color: #2b5eae;
				font-weight: 600;
			}
			.header_nav_2 div{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #2b5eae;
				padding: 3px 20px;
				border: 1px solid #fff;
			}
			.header_nav_2 >div:hover{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #fff !important;
				border: 1px solid #B8B8B8;
				background: #82bcff;
				padding: 3px 20px;
				border-radius: 2px;
			}
			.hr1 {
			    margin-top: 10px;
			    margin-bottom: 30px;
			    border: 0;
			    border-top: 2px solid #2459aa;
			    clear: both;
			}
			.hr2 {
			    margin-top: 10px;
			    margin-bottom: 30px;
			    border: 0;
			    border-top: 2px dashed #2459aa;
			   	clear: both;
			}
			.header_content_center{
				width: 60%;
				max-width: 1190px;
				margin: 0 auto;  
				position: relative;
			}
			.body_content_center{
				width: 60%;
				max-width: 1190px;
				margin: 0 auto;  
				position: relative;
			}
			.Examination_list{
				width: 80%;
				padding-left: 25px;
			 }
			 .Examination_list>ul{
				padding-left: 0px;
			 }
			 .Examination_list>ul>li{
				text-align: left;
				padding: 15px;
				margin-bottom: 15px;
				margin-top: 15px;
				border: 1px solid #494949;
				list-style-type:none;
			}
			
			.Examination_list_title{
				border: 1px solid #a4a4a4;
				padding: 6px 12px;
				color: #2B5EAE;
			}
			.Examination_list_title>span{
				background: #295c96;
			    color: #fff;
			    padding: 3px 6px;
			    border-radius: 50%;
			}
			.Examination_list_content{
				border: 1px solid #a4a4a4;
				padding: 10px 25px;
				margin-top: 10px;
			}
			.Examination_list_content>li{
				width: 100% !important;
				position: relative;
	    		overflow: hidden;
	    		padding: 4px 0;
			}
			.Examination_list_content>li>input{
				float: left;
				margin-right: 10px;
			}
			.Basic_course_content{
				padding-bottom:  0px;

			}
			.Basic_course_content>ul>li{
				padding: 16px 0;
				list-style:none;
				float: left;
				width: 100%;
			}
			.Basic_course_content>ul{
				margin: 0;
				padding: 0;
				margin-bottom: 16px;
				float: left;
				width: 100%;
			}
			.Basic_course_content>ul>li>div>span{
				float: left;
				font-size: 16px;
				padding: 4px 0;
				font-family: "微软雅黑";
				color: #707070;
			}
			.Basic_course_content>ul>li>div>div>span{
				float: left;
				font-size: 16px;
				padding: 4px 0;
				font-family: "微软雅黑";
				color: #707070;
			}
			.Basic_course_content>ul>li>div>span>font{
				color: #ff0000;
			}
			.Basic_course_content>ul>li>div>input{
				width: 50%;
				padding: 5px 0;
				padding-left: 5px;
				margin-left: 25px;
			}
			.Basic_course_content>ul>li>div ul li:nth-child(1){
				margin-top: 0;
			}
			
			table {
				float: left;
				margin-left: 25px;
				width: 50%;
				font-size: 16px;
				padding: 4px 0;
				font-family: "微软雅黑";
				color: #707070;
			}
			table tbody tr{
				border-bottom: 1px solid #82bcff;
			}
			table thead tr th:nth-child(2){
				float: right;
				padding-right: 50px;
			}
			table tbody tr td:nth-child(2) {
				float: right;
				padding-right: 50px;
			}
			td, th {
			    padding: 5px 20px;
			}
			.triangle-down{
			    display: inline-block;
			    float: none;
			    border-top: 4px solid;
			    border-right: 4px solid transparent;
			    border-left: 4px solid transparent;
			    border-bottom: 4px solid transparent;
			    margin-top: 12px;
			    width: 0;
			    height: 0;
			    margin-left: 4px;
			    color: #2b5eae;
			    vertical-align: middle;
			}
			.packup1>span,.packup2>span{
				color: #2b5eae !important;
				margin-left: 20px;
				font-family: "微软雅黑";
				font-size: 16px;
				
			}
			.rotate{
				transform :rotate(-180deg);
			}
		</style>
	</head>
	<body >
		<div class="header_content_center">
			<div class="row" style="margin: 0 auto">
				<div class="header_nav_1_current">
					<font >调研分发</font>
				</div>
				
				<div class="header_nav_2">
					<div onclick="confirm()" style="cursor:pointer;" > 
						确认分发
					</div>
					<div onclick="cancle()" style="cursor:pointer;"> 
						取消
					</div>
					
				</div>
			</div>
			
			<div>
				<hr class="hr1"/>
			</div>
		</div>
		<div class="header_content_center">
			<div class="Basic_course_content">
					<ul>
						<li>
							<div>
								<span><font>*</font> 问卷名称：</span>
								<input type="text" placeholder="" id = "name">
							</div>
						</li>
						<li>
							<div>
								<span><font>*</font> 调研方向：</span>
								<input type="text" id = "direction">
							</div>
						</li>
						<li>
							<div>
								<span><font>*</font> 调研规模：</span>
								<input type="number" placeholder="50人以下" id = "scale">
							</div>
						</li>
						<li>
							<div style="float: left; display: inline;width: 100%;">
								<span><font>*</font> 调研对象：</span>
								<table >
									<thead style="background-color: #cdcdcd; color: #fff;padding: 5px;">
										<tr >
											<th >账号</th>
											<th >姓名</th>
										</tr>
									</thead>
									<tbody id = "userlist">
									</tbody>
								</table>
								<div style="float: left;cursor:pointer;" class="packup1" >
									<span >收起 </span>
									<p class="triangle-down"></p>
								</div>
							</div>
						</li>
						<li>
							<div style=" margin: 10px 0px;display: inline; width: 100%;">
								<span><font>*</font> 调研题目：</span>
								<div class="Examination_list" style="float: left;">
									<ul id = "question_type0">
									</ul>
									<ul id = "question_type1">
									</ul>
									<ul id = "question_type2">
									</ul>
									<ul id = "question_type3">
									</ul>
								</div>
								<div style="float: left; cursor:pointer;" class="packup2">
									<span>收起  </span>
									<p class="triangle-down"></p>
								</div>
							</div>
						</li>
					</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	 window.onload=function(){
	 }
	$(function () {
		
		$(".packup1").click(function () {
			$(this).parent().find("table tbody tr:not(:nth-child(1))").toggle();
			if($(this).parent().find("table tbody tr:nth-child(2)").is(":hidden")){
				$(this).find("span").html("展开");
				$(this).find("p").addClass("rotate");
			}else{
				$(this).find("span").html("收起");
				$(this).find("p").removeClass("rotate");
			}
			
		});
		$(".packup2").click(function (){
			$(".Examination_list>ul:not(:nth-child(1))").toggle();
			$(this).prev().find(">ul:nth-child(1)>li:not(:nth-child(1))").toggle();
			if($(this).prev().find(">ul:nth-child(1)>li:nth-child(2)").is(":hidden")){
				$(this).find("span").html("展开");
				$(this).find("p").addClass("rotate");
			}else{
				$(this).find("span").html("收起");
				$(this).find("p").removeClass("rotate");

			}
		});	
	});
	
	
	
	var rootPath = '${rootPath}';
	var paperId = '${paperId}';
	
	$(function(){
		getTestIdList();
		getMap();
	})
	function getMap(){
		var url = rootPath + "/surveyPaper/map/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {},
			success : function(data) {
				if (data) {
					console.log(data);
					$("#direction").val(data.direction);
					$("#name").val(data.name);
					$("#scale").val(data.scale);
					getUserList(data.object);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				top.commonTools.showTip("失败！", 2);
			}
		});
	}
	function getUserList(id){
		var url = rootPath + "/surveyPaper/userData";
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{'data':id},
			success:function(data){
				if(data){
					show(data);
					$(".packup1").click();
				}
			}
		});
	}
	
	function show(data){
		var html = "";
		for(var i = 0;i<data.length;i++){
			html+="<tr>"
	          	+"<td><span>"+data[i].nickname+"</span></td>"
	          	+"<td><span>"+data[i].name+"</span></td>"
	        +"</tr>";
		}
		$("#userlist").html(html);
	}
	function getTestIdList() {
		var url = rootPath + "/surveyPaper/testList/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "html",
			data : {},
			success : function(data) {
				if (data) {
					questionId = data;
					getTestList(questionId);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				top.commonTools.showTip("失败", 2);
			}
		});
	}
	function getTestList(id) {
		var url = rootPath + "/surveyPaper/questionListData";
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {
				'data' : id
			},
			success : function(data) {
				if (data) {
					showTest(data);
					$(".packup2").click();
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				top.commonTools.showTip("失败", 2);
			}
		});
	}
	
	function showTest(data) {
		var htmStr0=""; 
		var htmStr1=""; 
		var htmStr2=""; 
		var htmStr3=""; 
		var htmStr="";
		for(var i = 0; i < data.length; i++){
			if (data[i].class_id == "单选题") {
				htmStr0 += "<li>"
					+ "<div class=\"Examination_list_title\">"
					+ "<font>"
					+ data[i].question
					+ "</font>"
					+ "</div>"
					+ "<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr0 += "<li>"
							+ "<input type=\"radio\" name=\"radio1\" />&nbsp;"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr0 += "</ul></li>";
			}else if (data[i].class_id == "多选题") {
				htmStr1 += "<li>"
					+ "<div class=\"Examination_list_title\">"
					+ "<font>"
					+ data[i].question
					+ "</font>"
					+ "</div>"
					+ "<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr1 += "<li>"
							+ "<input type=\"checkbox\" name=\"check1\" />&nbsp;"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr1 += "</ul></li>";
			}else if (data[i].class_id == "判断题") {
				htmStr2 += "<li>"
					+ "<div class=\"Examination_list_title\">"
					+ "<font>"
					+ data[i].question
					+ "</font>"
					+ "</div>"
					+ "<ul class=\"Examination_list_content\">";
				htmStr2 += "<li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>是</font>"
							+ "</li><li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>否</font>"
							+ "</li>";
				htmStr2 += "</ul></li>";
			}else if (data[i].class_id == "问答题") {
				htmStr3 += "<li>"
					+ "<div class=\"Examination_list_title\">"
					+ "<font>"
					+ data[i].question
					+ "</font>"
					+ "</div>"
					+ "<ul class=\"Examination_list_content\">";
				htmStr3 += "<p style =\"height:45px\"></p>";
				htmStr3 += "</ul></li>";
			}
		}
		$("#question_type0").html(htmStr0);
		$("#question_type1").html(htmStr1);
		$("#question_type2").html(htmStr2);
		$("#question_type3").html(htmStr3);
	}
	
	////////////////////caozuo
	function confirm(){
		var url = rootPath + "/surveyPaper/distribute/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {},
			success : function(data) {
				if (data) {
					top.commonTools.showTip("分发成功", 1);
					parent.status1();
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				top.commonTools.showTip("操作失败！", 1);
			}
		});
	}
	
	function cancle(){
		parent.status1();
	}
	</script>
</html>
